<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui" 
	template="/WEB-INF/templates/template.xhtml">
	<ui:define name="content">
		<h:form>
	        <p:remoteCommand name="increment" onstart="findMe();" autoRun="true"/>
			<p:growl id="messages" showDetail="true" life="10000" /> 
			<p:gmap id="jakarta" center="#{locationBean.centerPosition}" zoom="15" type="HYBRID" style="width:600px;height:400px" 
				widgetVar="gmap" model="#{locationBean.nowhere}">
				<p:ajax event="markerDrag" listener="#{locationBean.onMarkerDrag}" update="jakarta" />  
			</p:gmap>
			<h:inputHidden id="currentPosition" value="#{locationBean.currentPos}" />
			<p:commandButton type="button" value="dimana aku?" update="gmap" />
		</h:form>
		<h:outputScript library="primefaces" name="gmap/gmap.js" />
        <script type="text/javascript">
            function findMe() {
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        var map = gmap.getMap(),
                        latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                        map.setCenter(latlng);
						
                        var marker = new google.maps.Marker({
                            position: latlng,
                            draggable:true,
                            title: 'aku disini'
                        });
                        marker.setMap(map);
                        document.getElementById("currentPosition").value=marker;
                    },
                    function(error) {
                        alert(error.message);
                    },
                    {
                       enableHighAccuracy: true
                    });
            }

        </script>
	</ui:define>
</ui:composition>

